<!DOCTYPE HTML>
<html>
  <head>
    <title>wait test</title>
    <script type="text/javascript" charset="utf-8">
      function setTimeoutDisplay(id, display, timeout) {
          setTimeout(function() {
              document.getElementById(id).style.display = display;
          }, timeout);
      }

      function setTimeoutRemove(id, timeout) {
          setTimeout(function() {
              var e = document.getElementById(id);
              e.parentNode.removeChild(e);
          }, timeout);
      }

      function setDisabled(id, disabled, timeout) {
        setTimeout(function() {
          document.getElementById(id).disabled = disabled;
        }, timeout);
      }
    </script>
  </head>

  <body>
    <div id="foo" style="display:block;">foo</div>
    <div id="bar" style="display:none;" onclick='this.innerHTML = "changed"'>bar</div>
    <a id="show_bar" href="#" onclick="setTimeoutDisplay('bar', 'block', 500);">show bar</a>
    <a id="hide_foo" href="#" onclick="setTimeoutDisplay('foo', 'none', 500);">hide foo</a>
    <a id="remove_foo" href="#" onclick="setTimeoutRemove('foo', 1000);">remove foo</a>
    <div id="buttons">
      <button id="btn" type="button" onclick="setDisabled('btn', true, 0)" disabled>Click To Disable!</button>
      <a id="enable_btn" href="#" onclick="setDisabled('btn', false, 500);">enable btn</a>
      <button id="btn2" style="display:none;" type="button" disabled>Hidden and Disabled</button>
      <a id="show_and_enable_btn" href="#" onclick="setTimeoutDisplay('btn2', 'block', 500); setDisabled('btn2', false, 1000);">
        show and enable btn
      </a>
    </div>
    <div id="also_hidden" style="display:block;"></div>
  </body>
</html>
